<template>
    <section class="testMain">
      <div class="topTitle blue getTop">
        <span class="goBack" @click="goBack"><i></i></span>
        车辆认证
        <span @click="postImg" class="findClick">提交</span>
      </div>
      <div class="info">
        <div class="canvasBox">
          <canvas id="myCanvas"></canvas>
        </div>
        <div class="infoTop">
          <div class="infoBoxA">
            <span>温馨提示：</span>我们会严格依照法律和<span>隐私政策</span>对您的个人信息进行保密，不会把您的任何个人信息提供给无关的第三方。
          </div>
        </div>

        <div class="infoMain carInfo">
          <div class="topMore">
            <p class="title">上传证明</p>
            <p class="txtle">请确保内容清晰可见。本内容仅用于认证审核，不对任何人可见。</p>
          </div>
          <div class="bottom">
            <ul>
              <li>
                <img src="/static/images/test05.jpg">
              </li>
              <li>
                <span class="close" @click="testClose(2)"></span>
                <a href="javascript:;" class="file addImg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="file" @change="upImgB" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png"></a>
                <img v-if="images.textB!=''" :src="images.textB">
                <img v-else src="/static/images/test06.jpg">
              </li>
            </ul>
          </div>
          

        </div>
      </div>
    </section>
</template>
<script>
import axios from 'axios'
import {Post} from '@/config/api.js'
export default {
  name: 'hello',
  data() {
    return {
      images:{
        textA:'',
        textB:'',
        imgKey:''
      }
    }
  },

  methods: {
    //返回上一页
    goBack(){
      this.$router.go(-1)
    },
    async postTest(){
      if(this.images.imgKey!=''){
        this.$store.dispatch("loading",true)
        let data={
          "image":this.images.imgKey,
          "card_type":3
        }
        await Post('/user/card',this.$store.state.token,data).then((res)=>{
          let data={
            static:true,
            txt:{
              type:3,
              message:"提交成功!"
            }
          }
          this.$store.dispatch("alert",data)
        })
      }
      this.$store.dispatch("loading",false)
    },
    //证件上传
    upImgB(e){ 
      let file = e.target.files[0]; //input 
      let that=this
      let reader = new FileReader(); 
      reader.readAsDataURL(file); 
      reader.onload = function(e){ 
        var res = this.result

        var res = this.result
        var cvs = document.getElementById("myCanvas");
        var ctx = cvs.getContext("2d");
        var img = new Image();
        img.src = this.result;
        img.onload = function(){
          var width = img.width,height = img.height;
          var scale = width / height;
          var width1 = 720,height1 = parseInt(width1 / scale);
          ctx.clearRect(0,0,cvs.width,cvs.height);
          cvs.width = width1;
          cvs.height = height1;
          ctx.drawImage(img,0,0,width,height,0,0,width1,height1);
          var base64 = cvs.toDataURL("image/jpeg",0.7)
          that.images.textB = base64
          //that.postImg(base64)
        }
      }
    },
    //图片先上传到七牛
    async postImg(){
        this.$store.dispatch("loading",true)
        let name=(new Date()).valueOf()+''+parseInt(Math.random()*10000);
        let key="user/say/1001/"+name+".png"
        let date={
          "key":key,
          "image":this.images.textB
        }
        
        await Post('/base/upload/image',this.$store.state.token,date).then((res)=>{
          this.images.imgKey = res.data.key
          this.postTest()
        })
        this.$store.dispatch("loading",false)
    },
    testClose(val){
      if(val==1){
        this.images.textA=''
      }else{
        this.images.textB=''
      }
    }

  }
}

</script>
